<template>
  <div id="app">
    <div>{{miao}}</div>
    <el-button type="info" @click="start">开始</el-button>
    <el-button type="info" @click="record">记录</el-button>
    <el-button type="info" @click="stop">结束</el-button>
    <div
    v-for="(item,index) in records"
    :key="index"
    >{{item}}</div>
  </div>
</template>

<script>



export default {
  name: 'App',
  data:function(){
    return{
      miao:"0:00",
      records:[]
    }
  },
  methods:{
    start:function(){
      console.log("start");
      this.timerID=setInterval(()=>{
        const m_arr=this.miao.split(':');
        const a=parseInt(m_arr[0]);
        const b=parseInt(m_arr[1]);
        let sum=a*100+b;
        sum++;
        const a1=parseInt(sum/100);
        const b1=sum%100;
        const a1_str=`${a1}`;
        const b1_str=`${b1}`;
        const m=a1_str+':'+b1_str.padStart(2,0);
        this.miao=m;

      },10)
    },
    record:function(){
      console.log("record");
      this.records.push(this.miao);
    },
    stop:function(){
      console.log("stop");
      clearInterval(this.timerID);
    }
  }

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
